<template>
  <ItemWrap title="当前补货作业">
    <!-- 补货作业操作页面 -->
    <div class="current-homework" style="border-radius: 10px">
      <!-- 补货表头字段 -->
      <div class="bhzy-class header-style-class">
        <span>补货单号</span>
        <span>国内/国际仓</span>
        <span>总数量</span>
        <span>已补数量</span>
        <span>未补数量</span>
        <span>补货人</span>
      </div>

      <!-- 数据行 -->
      <div
        class="bhzy-class bhzy-class-value"
        v-for="item in tableData"
        :key="item.replenishmentNumber"
      >
        <span class="jhdh-class">{{ item.replenishmentNumber }}</span>
        <span class="gjlb-class" v-if="item.warehouseType === '国际仓'">
          <img class="img-gj-display" src="../assets/imgs/img/gj.png" />
        </span>
        <span class="gjlb-class" v-else>
          <img class="img-gj-display" src="../assets/imgs/img/china.png" />
        </span>
        <!-- <span class="total-num-class">{{ item.totalQuantity }}</span>
        <span class="complete-num-class">{{ item.completedQuantity }}</span>
        <span class="pending-num-class">{{ item.pendingQuantity }}</span> -->
        <!-- 添加柱状图的 canvas -->
        <span class="zzt-style-class">
          <canvas
            :id="'chart-' + item.replenishmentNumber"
            width="378"
            height="68"
          ></canvas>
        </span>

        <span class="bhr-class">{{ item.replenisher }}</span>
      </div>
    </div>
  </ItemWrap>
</template>

<script setup>
import { onMounted, ref, watchEffect, onBeforeUnmount } from "vue";
import ItemWrap from "./item-wrap/item-wrap.vue";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
import Chart from "chart.js/auto";
import ChartDataLabels from "chartjs-plugin-datalabels";
import * as echarts from "echarts";

// 模拟数据
const tableData = ref([
  {
    replenishmentNumber: "RH12345",
    warehouseType: "国际仓",
    totalQuantity: 1000,
    completedQuantity: 650,
    pendingQuantity: 350,
    replenisher: "张三",
  },
  {
    replenishmentNumber: "RH12346",
    warehouseType: "国内仓",
    totalQuantity: 500,
    completedQuantity: 450,
    pendingQuantity: 150,
    replenisher: "李四",
  },
  {
    replenishmentNumber: "RH12347",
    warehouseType: "国际仓",
    totalQuantity: 200,
    completedQuantity: 150,
    pendingQuantity: 50,
    replenisher: "李四",
  },
  {
    replenishmentNumber: "RH123468",
    warehouseType: "国内仓",
    totalQuantity: 500,
    completedQuantity: 450,
    pendingQuantity: 150,
    replenisher: "李四",
  },
  {
    replenishmentNumber: "RH123478",
    warehouseType: "国际仓",
    totalQuantity: 200,
    completedQuantity: 150,
    pendingQuantity: 50,
    replenisher: "李四",
  },
  // 可以继续添加更多数据
]);

// 创建柱状图
const initChart = (id, total, completed, pending) => {
  const chartDom = document.getElementById(`chart-${id}`);
  const myChart = echarts.init(chartDom);

  const option = {
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        return `${params.seriesName}<br>${params.value}`;
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0],
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false, color: "#000" }, // 隐藏 X 轴的刻度标签
      // axisLabel: {
      //   color: "#00ff00", // 设置 Y 轴刻度值颜色
      // },
    },
    yAxis: {
      type: "category",
      data: ["数量"],
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false, color: "#000" }, // 隐藏 X 轴的刻度标签
      // axisLabel: {
      //   color: "#2DA6DB",
      // },
    },
    series: [
      {
        name: "总数量",
        type: "bar",
        stack: "总量",
        data: [total],
        barwidth: "30%",
        barMinHeight: 20,
        label: {
          show: true,
          position: "insideLeft",
          fontSize: 15,
          color: "white",
          formatter: "{c}",
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#86C6E2" }, // 深色
              { offset: 1, color: "#86C6E2" }, // 浅色
            ],
            global: false,
          },
          borderColor: "none",
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          shadowBlur: 5,
          shadowOffsetX: 2,
          shadowOffsetY: 2,
        },
      },
      {
        name: "已补数量",
        type: "bar",
        stack: "总量",
        data: [completed],
        barwidth: "30%",
        label: {
          show: true,
          position: "insideLeft",
          fontSize: 15,
          color: "white",
          formatter: "{c}",
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              { offset: 0, color: "rgba(54, 162, 235, 0.8)" }, // 深色
              { offset: 1, color: "rgba(54, 162, 235, 0.6)" }, // 浅色
            ],
            global: false,
          },
          borderColor: "none",
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          shadowBlur: 5,
          shadowOffsetX: 2,
          shadowOffsetY: 2,
        },
      },
      {
        name: "未补数量",
        type: "bar",
        stack: "总量",
        data: [pending],
        barwidth: "30%",
        label: {
          show: true,
          position: "insideLeft",
          fontSize: 15,
          color: "white",
          fontWeight: 500,
          formatter: "{c}",
          padding: [0, 5, 0, 0], // 调整标签的位置
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#3E59A5" }, // 深色
              { offset: 1, color: "#3E59A5" }, // 浅色
            ],
            global: false,
          },
          borderColor: "none",
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          shadowBlur: 5,
          shadowOffsetX: 2,
          shadowOffsetY: 2,
        },
      },
    ],
  };

  myChart.setOption(option);
};

// Vue 组件挂载后初始化图表
onMounted(() => {
  tableData.value.forEach((item) => {
    initChart(
      item.replenishmentNumber,
      item.totalQuantity,
      item.completedQuantity,
      item.pendingQuantity
    );
  });
});
</script>

<style lang="scss" scoped>
canvas {
  height: 100%;
  width: 360px;
}

span.bhr-class {
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #003366; /* 深色字体 */
  background: linear-gradient(135deg, #ffffff, #ffffff); /* 渐变背景色 */
  -webkit-background-clip: text; /* 背景裁剪为文本 */
  -webkit-text-fill-color: transparent; /* 字体填充透明 */
  transition: color 0.3s ease; /* 渐变效果平滑过渡 */
  margin-right: 10px;
  // padding-top: 15px;
  padding: 5px;
}

img.img-gj-display {
  width: 50px;
  height: 30px;
  margin-left: 30px;
}
span.jhdh-class {
  border-radius: 10px;
  width: 20px;
  background: black;
  padding: 5px;
  height: 30px;
  line-height: 20px;
  margin-left: 5px;
  margin-top: 5px;
}

span.gjlb-class {
  padding: 5px;
}
.bhzy-class.bhzy-class-value {
  background-color: #374149;
  font-size: 12px;
  padding-top: 3px;
  height: 40px;
  background: linear-gradient(135deg, var(--el-color-primary-light-3));
  font-family: "Roboto", sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease;
}
.bhzy-class.header-style-class {
  background-color: var(--el-text-color-regular);
  font-size: 13px;
  padding: 5px 0;
  opacity: 0.9;
  background: linear-gradient(135deg, #000428, #004e92);
  font-family: "Roboto", sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease;
}
.bhzy-class {
  display: flex;
  justify-content: space-between;
}

.header {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}

.bhzy-class span {
  flex: 1;
  text-align: center;
}

.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;
    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 380px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../assets/imgs/img/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }
      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 15px;
      width: 80px;
      flex-shrink: 0;
    }

    .time {
      font-size: 12px;
      color: #fff;
    }

    .address {
      font-size: 12px;
      cursor: pointer;
    }

    .types {
      width: 30px;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
    .orderNum {
      color: #00b8ff;
    }
  }
}

.left_boottom_item {
  transition: opacity 1s;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}

@media (min-height: 1080px) {
  .bhzy-class.header-style-class[data-v-1c9c0e44] {
    padding: 10px 0 5px 0 !important;
    height: 40px !important;
  }

  .bhzy-class.bhzy-class-value[data-v-1c9c0e44] {
    height: 48px !important;
  }
}
</style>
